<template>
  <div>
    <div class="dlg">
      <div class="dlg_header">使用方法</div>
      <div class="dlg_content">
        <div class="dlg_title">
          <h3>可用范围：</h3>
          <span>{{list.range}}</span>
        </div>
        <div class="dlg_title">
          <h3>有效期：</h3>
          <span>{{list.expiry}}</span>
        </div>
        <div class="dlg_title">
          <h3>使用条件：</h3>
          <span>{{list.use_cdt}}</span>
        </div>
        <ul>
          <h3>使用方法：</h3>
          <li><span>1</span><p>使用APP账号登录游戏</p></li>
          <li><span>2</span><p>在游戏内购买道具</p></li>
          <li><span>3</span><p>在支付页面中选择可用的优惠券，完成支付</p></li>
        </ul>
      </div>
      <div class="dlg_footer">
        <div class="flex" @click="notClick">我知道了</div>
        <div class="flex confirm" @click="gameDetailClick">游戏详情</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
    }
  },
  methods: {
    notClick() {
      this.$emit('not-click', false)
    },
    gameDetailClick() {
      this.$toast(this.list.gameid)
      // if(this.couponList[this.currentIndex].gameid != 0){
      //   //跳到游戏详情页  需要传gameid
      //   this.$router.push('/gameinfo/gameid/' + this.couponList[this.currentIndex].gameid)
      // }else {
      //   this.isShow = false
      //   Toast('此券为通用券')
      // }
    }
  },
}
</script>

<style lang="less" scoped>

.dlg {
  width: 8.533333rem;
  height: 8.026667rem;
  background: #ffffff;
}

.dlg_header {
  width: 8.533333rem;
  height: 1.333333rem;
  background: #ff5543;
  font-size: .426667rem;
  color: #fff;
  text-align: center;
  line-height: 1.333333rem;
}

.dlg_content {
  box-sizing: border-box;
  padding: .32rem .4rem 0;
}

.dlg_title {
  display: flex;
  line-height: .6rem;
  font-size: .346667rem;
  color: #999999;
}

.dlg_title h3 {
  font-size: .346667rem;
  width: 1.866667rem;
  margin: 0;
  color: #222222;
  font-weight: 600;
}

.dlg_content ul {
  margin-top: .533333rem;
  font-size: .346667rem;
  color: #999999;
}

.dlg_content ul h3 {
  font-size: .346667rem;
  width: 2rem;
  margin: 0 0 .133333rem 0;
  color: #222222;
  font-weight: 600;
}

.dlg_content ul li {
  height: .6rem;
  display: flex;
  align-items: center;
}

.dlg_content ul li span {
  width: .293333rem;
  height: .293333rem;
  background: #ff5543;
  border-radius: 50%;
  margin-right: .133333rem;
  color: #fff;
  line-height: .293333rem;
  text-align: center;
  font-size: .266667rem;
}

.dlg_content ul li p {
  margin: 0;
}

.dlg_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 8.533333rem;
  height: 1.333333rem;
  border-top: .013333rem solid #D2D2D2;
  font-size: .426667rem;
  line-height: 1.333333rem;
  text-align: center;
  color: #999999;
}

.dlg_footer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 1.333333rem;
  width: .013333rem;
  background: #d2d2d2;
}

.confirm {
  color: #ff5543;
}

.flex {
  flex: 1;
}

.van-overlay {
  z-index: 1;
}

.jynone {
  width: 9.6rem;
  height: 3.466667rem;
  margin: .266667rem auto 0;
}

.jynone img {
  width: 100%;
  height: 100%;
}
</style>